<template>
  <div class="hello">
    <!-- 四个展示卡片 -->
    <div class="cardDiv">
      <el-card class="box-card">
        <div class="text1 item1">
          <div class="cardtext">
            <img src="../assets/images/renshu.png" alt="">
            <div class="itemdiv">用户总数 <span>{{usertotal}}</span></div>
          </div>
        </div>
      </el-card>
      <el-card class="box-card card2">
        <div class="text1 item1">
          <div class="cardtext">
            <img src="../assets/images/wenzhang.png" alt="">
            <div class="itemdiv">文章总数 <span>{{messagetotal}}</span></div>
          </div>
        </div>
      </el-card>
      <el-card class="box-card card2">
        <div class="text1 item1">
          <div class="cardtext">
            <img src="../assets/images/yuedushu.png" alt="">
            <div class="itemdiv">文章阅读 <span>{{wenzahngtotal}}</span></div>
          </div>
        </div>
      </el-card>
      <el-card class="box-card card2">
        <div class="text1 item1">
          <div class="cardtext">
            <img src="../assets/images/yonghushu.png" alt="">
            <div class="itemdiv">报道人数 <span>{{baodaototal}}</span></div>
          </div>
        </div>
      </el-card>
    </div>
    <!-- 画多个Echarts图 -->
    <div class="chartsdiv">
      <div style="width:454px;height:250px;float:left;margin-top:10px">
        <!-- 上一 -->
        <el-card style="width:454px;height:250px">
          <div style="width:454px;height:250px" id="echarts1"></div>
        </el-card>
      </div>
      <div style="width:360px;height:250px;float:left;margin-left:10px;margin-top:10px">
        <!-- 上二 -->
        <el-card style="width:360px;height:250px;">
          <div style="width:360px;height:250px;" id="echarts2"></div>
        </el-card>
      </div>
      <div style="width:454px;height:250px;float:left;margin-left:10px;margin-top:10px">
        <!-- 上三 -->
        <el-card style="width:454px;height:250px;">
          <div style="width:454px;height:250px;" id="echarts3"></div>
        </el-card>
      </div>
      <div style="width:454px;height:270px;float:left;margin-top:10px">
        <!-- 下一 -->
        <el-card style="width:454px;height:270px;">
          <div style="width:454px;height:270px;" id="echarts4">
            <div>
              <h3 style="margin-top:-5px">省份报道信息排行</h3>
            </div>
            <div style="width:430px;margin-top:5px;font-size:10px;" v-for="item in provenceReport" :key="item.index">
              <div style="height:10px;margin-left:340px;line-height:40px;margin-top:-5px">{{item.name}}</div>
              <el-progress 
              style="width:85%"
              :text-inside=true
              status="success"
              :percentage=parseInt(item.value)
              :stroke-width="20" 
              >
              </el-progress>
            </div>
          </div>
        </el-card>
      </div>
      <div style="width:360px;height:270px;float:left;margin-left:10px;margin-top:10px">
        <!-- 下二 -->
        <el-card style="width:360px;height:270px;">
          <div style="width:360px;height:270px;" id="echarts5"></div>
        </el-card>
      </div>
      <div style="width:454px;height:270px;float:left;margin-left:10px;margin-top:10px">
        <!-- 下三 -->
        <el-card style="width:454px;height:270px;">
          <div style="width:454px;height:270px;" id="echarts6" v-if="this.hotmessage!=[]">
            <span><h3 style="margin-top:-5px">文章阅读排行</h3></span>
            <div class="paihang" style="color:red"><img style="width:30px;height:30px;float:left" src="../assets/images/diyiming.png" alt="">{{hotmessage[0]}}</div>
            <div class="paihang" style="color:orange"><img style="width:30px;height:30px;float:left" src="../assets/images/dierming.png" alt="">{{hotmessage[1]}}</div>
            <div class="paihang" style="color:yellow"><img style="width:30px;height:30px;float:left" src="../assets/images/disanming.png" alt="">{{hotmessage[2]}}</div>
            <div class="paihang" style="color:gray"><img style="width:30px;height:30px;float:left" src="../assets/images/disiming.png" alt="">{{hotmessage[3]}}</div>
            <div class="paihang" style="color:gray"><img style="width:30px;height:30px;float:left" src="../assets/images/diwuming.png" alt="">{{hotmessage[4]}}</div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      usertotal:'30',
      messagetotal:'0',
      wenzahngtotal:'0',
      baodaototal:'20',
      provenceReport:[],
      hotmessage:[]
    }
  },
  created(){
    this.getMessageViews()
    this.getProvenceReport()
    this.getMessageTotal()
    this.getUserTotal()
    this.getData2()
    this.getData3()
    this.getdata4()
    // this.getData4()
  },
  methods:{
    // 获取文章阅读数
    getMessageViews(){
      var _this=this
        var url='http://taruinfo.work:8088/message/getFavoritesSum'
        _this.$axios.get(url).then(function(res){
            // console.log(res.data)
            if(res.data.code==200){
              _this.wenzahngtotal=res.data.data.favorites
            }else{
                console.log('获取省份报道信息失败')
            }
        })
        .catch(function(err) {
          console.log(err)
      })
    },
    // 获取每个省份报道数据
    getProvenceReport(){
      var _this=this
      var url='http://taruinfo.work:8088/matriculate/provenceRegRate?reportInfo=%E6%98%AF'
      _this.$axios.get(url).then(function(res){
          // console.log(res.data)
          if(res.data.code=='200'){
            var data=[]
            var data2=[]
            var num =0
            for(var i=0;i<res.data.data.length;i++){
              num = num+parseInt(res.data.data[i].reportNumber)
              data[i]={'name':res.data.data[i].provinces,'value':res.data.data[i].regRate}
              data2[i]={'name':res.data.data[i].provinces,'value':res.data.data[i].reportNumber}

            }
            _this.provenceReport=data
            _this.baodaototal=num
            
            _this.drawEcharts(data2)
          }else{
              console.log('获取省份报道数据失败')
          }
      })
      .catch(function(err) {
          console.log(err)
      })
    },
    // 画上一饼状图
    drawEcharts(data){
      var myChart = this.$echarts.init(document.getElementById('echarts1'))
      var option={
        title:{
          text:'报道省份分布',
          left:'center'
        },
        tooltip:{
          trigger:'item'
        },
        series:[
          {
            name:'报道人数',
            type:'pie',
            roseType:'area',
            itemStyle:{
              borderRadius:5
            },
            data:data
          }
        ]
      }
      myChart.setOption(option)
    },
    // 获取消息总数
    getMessageTotal(){
      var _this=this
      var url='http://taruinfo.work:8088/getMessageByList?page=1&pageCount=1'
      _this.$axios.get(url).then(function(res){
        // console.log(res.data)
        _this.messagetotal=res.data.total
      })
      .catch(function(err) {
          console.log(err)
      })
    },
    // 获取用户总数
    getUserTotal(){
      var _this=this
      var url='http://taruinfo.work:8088/getByPage?current=1&size=1'
      _this.$axios.get(url).then(function(res){
        _this.usertotal=res.data.data.total
      })
      .catch(function(err) {
          console.log(err);
      })
    },
    // 获取上二数据
    getData2(){
      var _this=this
      var url='http://taruinfo.work:8088/selectReportInfo?reportInfo=%E6%98%AF'
      _this.$axios.get(url).then(function(res){
        // console.log('上二：')
        // console.log(res.data)
        var faculty=[]
        var facultyData=[]
        var pieData=[]
        for(var i=0;i<res.data.data.length;i++){
          faculty[i]=res.data.data[i].facultyName
          facultyData[i]=parseInt(res.data.data[i].reportNumber)
          pieData[i]={'name':res.data.data[i].facultyName,'value':Math.round(((res.data.data[i].reportNumber)/_this.baodaototal)*100)}
        }
        _this.drawPie(faculty,facultyData)
        _this.drawpie(pieData,faculty)
      })
      .catch(function(err) {
          console.log(err)
      })
    },
    // 画柱状图
    drawPie(faculty,facultyData){
      var myChart = this.$echarts.init(document.getElementById('echarts2'))
      var option = {
          title: {
              text: '学院报到人数',
              left: 'center'
          },
          tooltip: {
              trigger: 'item'
          },
          xAxis: {
              type: 'category',
              data: faculty
          },
          yAxis: {
              type: 'value'
          },
          series: [{
              data: facultyData,
              type: 'bar'
          }]
      }
      myChart.setOption(option)
    },
    // 获取上三数据
    getData3(){
      var _this=this
      var url='http://taruinfo.work:8088/getMessageByList?page=1&pageCount=100'
      _this.$axios.get(url).then(function(res){
        console.log('上三数据')
        console.log(res.data)
        var data=[]
        var data2=[]
        for(var i=0;i<res.data.records.length;i++){
          data[i]=res.data.records[i].title
          data2[i]=res.data.records[i].favorites
        }
        _this.drawXY(data,data2)
      })
      .catch(function(err) {
          console.log(err)
      })
    },
    // 下三数据
    getdata4(){
      var _this=this
      var url='http://taruinfo.work:8088/message/getFavoritesOrder'
      _this.$axios.get(url).then(function(res){
        console.log('xia三数据')
        var data4=[]
        for(var i=0;i<res.data.data.favorites.length;i++){
          data4[i]=res.data.data.favorites[i].title
        }
        _this.hotmessage=data4
        console.log(data4)
      })
      .catch(function(err) {
          console.log(err)
      })
    },
    // h画折线图
    drawXY(data,data2){
      var myChart = this.$echarts.init(document.getElementById('echarts3'))
      var option = {
          title: {
              text: '文章阅读数量',
              left:'center'
          },
          tooltip: {
              trigger: 'axis',
              formatter:'标题：{b}<br/>阅读次数：{c}'
          },
           xAxis: {
                type: 'category',
                triggerEvent: true,
                data: data,
                axisLabel: {
                  formatter:function(value){
                    var res = value
                    if(res.length>3){
                      res=res.substring(0,3)+'...'
                    }
                    return res
                  }
                }
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: data2,
                type: 'line'
            }]
      }
      myChart.setOption(option)
    },
    // 获取下二数据
    // getData4(){
    //   var _this=this
    //   var url='http://taruinfo.work:8088/getMessageByList?page=1&pageCount=10'
    //   _this.$axios.get(url).then(function(res){
    //     console.log(res.data)
    //     _this.drawpie()
    //   })
    //   .catch(function(err) {
    //       console.log(err)
    //   })
    // },
    // 画饼状图
    drawpie(pieData){
      var myChart = this.$echarts.init(document.getElementById('echarts5'))
      var option = {
          title: {
              text: '学院报到占比',
              left: 'center'
          },
          tooltip: {
              trigger: 'item',
              formatter:'{a}<br/>{b}:{c}%'
          },
          // legend: {
          //     data:faculty
          // },
          series: [
              {
                  name: '学院报道占比',
                  type: 'pie',
                  radius: '50%',
                  data: pieData,
                  emphasis: {
                      itemStyle: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)',
                      }
                  }
              }
          ]
      }
      myChart.setOption(option)
    },
    handleClick(row) {
        console.log(row)
    }
  },
  mounted(){
    
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.cardDiv{
  /* height:100px; */
  width: 100%;
}
.chartsdiv{
  width: 100%;
}
.text1 {
  font-size: 14px;
}
.item1 {
  padding: 18px 0;
}
.box-card {
  width: 23%;
  float: left;
  background-color:bisque;
  /* height:90px */
}
.card2{
  margin-left: 30px;
}
.cardtext img{
  height: 60px;
  width: 60px;
  float: left;
  text-align: center;
}
.itemdiv{
  font-size: 25px;
  text-align: center;
  line-height: 50px;
  color: rgb(161, 172, 171);
}
.paihang{
  width:100%;
  height:38px
}
</style>
